<!DOCTYPE html>
<!-- html版本 -->
<!-- html标签是整个html文件的根标签 -->


<html lang="en">
    <!-- language：语言 -->
<!-- 你要编写的网页的语言，如果这个和你浏览器默认打开的语言格式不一样，他会给你弹一个翻译的页面 -->



    <head>
        <!-- head标签中写页面的属性 -->


    <meta charset="UTF-8">
    <!-- 编码格式，若是你写入的和网页展示设置的不一致可能会出现乱码-->





    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 这一行是移动端的一些，我们暂时不关注 -->




    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 其中viewport指的是设备的屏幕上能用来显示我们网页的那一块区域 -->
    <!-- 在设置可视区和设备宽度等宽，并设置初始缩放为不缩放（这个属性对移动端开发更重要） -->


    <!-- 这是注释 -->

    <!-- 标题标签
    <h1>这是h1标签</h1>
    <h2>这是h2标签</h2>
    <h3>这是h3标签</h3>
    <h4>这是h4标签</h4>
    <h5>这是h5标签</h5>
    <h6>这是h6标签</h6> -->

        <title>dongliyang Document</title>
   
    </head>
    <!-- 在head中写的是页面的属性 -->
<!-- 一般把title -->
    <body>
        <!-- body里面写的设计页面上显示的内容 -->
        <!-- hello world！ -->

        <!-- 使用段落标签p -->
        <h1>宝藏句子</h1>
        <p>1.仅仅活着是不够的，还需要有阳光、自由、和一点花的芬芳。——安徒生</p>
        <p>2.在最黑暗的那段人生，是我自己把自己拉出深渊。没有那个人，我就做那个人。——中岛美嘉</p>
        <p>3.且视他人之疑目如盏盏鬼火，大胆地去走你的夜路。——史铁生</p>
        <p>4.上人生的旅途罢，前途很远，也很暗。然而不要怕，不怕的人的面前才有路。——鲁迅</p>
        <p>5.所谓无底深渊，下去，也是前程万里。——木心</p>
        <!-- 使用p标签会发现与下一段之间存在缝隙 -->
        <!-- 当前的p标签描述的段落，前面还没有缩进 （css会学）-->
        <!-- 自动根据浏览器宽度来据欸的那个排版 -->
        <!--     html内容首尾处的换行、空格均没有用，只是被解析为一个空格 -->
        <!-- 在html中文字之间输入的多个空格只相当于一个空格 -->
        <!-- html中直接输入换行不会真的换行，而是相当于一个空格 -->
        

        <p>6.

            我要和生活再死磕几年。<br/>
            要么我就毁灭，要么我就注定铸就辉煌。<br/>
            如果有一天，你发现我在平庸面前低了头，
            请向我开炮。<br/>
            ——凯鲁亚克《在路上》</p>
        <!-- 使用换行标签   br/是规范写法，与那个双标签的两部分区分开-->
        <!-- br是一个单标签（不需要结束标签） -->
        <!-- br标签不像p标签那样带有一个很大的空隙 -->
        <!-- <br/>是规范写法，不建议写成<br> -->



        <h2>使用CSS也可以完成类似的效果，实际开发中以CSS为主</h2>
        <!-- 格式化标签 -->
        <strong>strong 加粗</strong><br/>
            <b>b 加粗</b><br/>
        <!-- 加粗  strong标签和b标签 -->



        <!-- 倾斜：em标签和i标签 -->
        <em>em倾斜</em><br/>
        <i>i倾斜</i><br/>


        <!-- 删除线：del标签和s标签 -->
        <del>del删除线</del><br/>
        <s>s删除线</s><br/>


        <!-- 下划线：ins标签和u标签        -->
        <ins>ins下环线</ins><br/>
        <u>u下划线</u><br/>

        <h2>图片标签：img </h2>
        <!-- 属性可以有多个，但是不能卸载标签之前 -->
        <!-- 属性之间使用空格分隔，可以是多个空格，也可以是换行 -->
        <!-- 属性之间没有先后顺序 -->
        <!-- 属性使用键值对的个是来表示 -->
        <!-- 关于目录结构：对于一个复杂的网站，页面资源很多，这种情况可以使用目录把这些文件整理好 -->
        <!-- 1.相对路径，以html所在的位置为基准，找到图片的位置 -->
        <!-- 同级路径：可以直接写文件名就可以，   也可以   ./    -->

        <h3>第一个图片</h3>
        <img src="2e283f01b0df50340786c3e7d65f138.jpg" alt="这是一张插画" title="这是一个漫画人物" width="800px" height="500px" border="5px">
<h3>第二个图片</h3>
<img src="04ee1e0f7db36bc6275232bc746cfed.jpg" alt="这是枫叶" title="这是枫叶" width="800px" height="500px" border="2px">

<h3>第三个图片</h3>
        <!-- 下一级路径：image/.1.jpg -->
        <img src="image/c7662b25eda555713e86add32226306.jpg" alt="这是一个小车" width="800px" height="500px" title=" 介个是车车" border="5px">
        <!--  -->

        <!-- 上一级路径：   ../imagetest/1.jpg    -->
<h4>第四个图片</h4>
<img src="../imagetest/72896a91b0cfddd9820c0d31fe89d87.jpg" alt="这是一颗树" title="介个是树" width="800px" height="500px" border="5px">


<!-- 绝对路径：一个完整的磁盘路径，或者网络路径 -->
<!-- 磁盘路径 D： -->


<!-- 网络路径： -->
<br/>
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.0210009e8580d90fb9e5cc786d14b18f?rik=UU3MIgqBW%2f%2bfuw&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20180401%2f0c6ad13e2e8d4273a4cb4cd0e0f9202d.jpeg&ehk=KEfVejdXmOGU43Vf3I%2for0KDWaA3QwJP%2bxeWS5c2MK0%3d&risl=&pid=ImgRaw&r=0" alt="这是一颗树" title="介个是树" width="600px" height="500px" border="5px">


<h3>超链接标签</h3>
<!-- a：这是超链接标签 -->
<!-- target：打开方式，默认是_self，如果是_blank则使用新的标签打开 -->
<!-- href：必须具备，表示点击后会跳转到哪一个页面 -->

<a href="http://www.baidu.com/" target="_blank">百度</a>
<a href="https://www.sogou.com/" target="_parent">搜狗</a>
<a href="https://www.qq.com/" target="_self">腾讯</a>
<a href="https://cn.aliyun.com/" target="_top">阿里</a>

<!-- 内部链接，网站内部页面之间的链接，写相对路径就可以咯 -->
<!--  -->




        <h1>优秀文章</h1>


        <h1>表格</h1>
        <!-- 表格标签有一些属性，可以设置大小边框等，但是一般使用CSS方式来设置 -->
        <!-- 这些属性都要放到table标签中 -->
        <!-- table标签：表示整个表格 -->
        <!-- tr：表示表格的一行 -->
<!-- td：表示一个单元格 -->
<!-- th：表示表头单元格 -->
<!-- thead：表格的头部区域（注意和th区分，范围是比th要大的 -->
<!-- tbody：表格得到主体区域 -->
<table align ="B223宿舍" border="5" cellpadding="20" cellspacing="0" width="800px" height="500px">  
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>来源</td>
    </tr>
    <tr>
        <td>董李阳</td>
        <td rowspan="6">男</td>
        <td>19</td>
        <td>陕西</td>
    </tr>
    <tr>
        <td>潘徐阳</td>
        <!-- <td>男</td> -->
        <td>20</td>
        <td>贵州</td>
    </tr>
    <tr>
        <td>王泽仁</td>
        <!-- <td>男</td> -->
        <td>19</td>
        <td>河南</td>
    </tr>
    <tr>
        <td>迪丽达尔</td>
        <!-- <td>男</td> -->
        <td>20</td>
        <td>新疆</td>
    </tr>
    <tr>
        <td>张起航</td>
        <!-- <td>男</td> -->
        <td>19</td>
        <td>甘肃</td>
    </tr>
    <tr>
        <td>吐尔孙巴依</td>
        <!-- <td>男</td> -->
        <td>19</td>
        <td>新疆</td>
    </tr>






    <!-- 合并表格先确定按照行还是列 -->
<!-- 跨行合并：roespan："n" -->
<!-- 先确定跨行还是列 -->
<!-- 找好目标单元格（跨列合并，左侧是目标单元格；跨行合并：上方是单元格 -->
<!-- 删除多余的单元格 -->
</table>





<!-- 列表标签 -->
<!-- 主要是使用来布局的，整齐好看 -->
<!-- 无序列表（重要） ul   ui-->
<!-- 有序列表（用的不是很多）ol li -->
<!-- 自定义列表（重要） dl（总标签）dt（小标签）dd（围绕标题来说明）上面有几个小标题，下面有几个围绕着标题来展开的 -->
<!-- 自定义列表（参考小米官网下面 -->

<!-- 元素之间是并列方式 -->
<!-- 最大的上面，只能放自己的小弟，小弟下面可以放其他的标签 -->
<!-- 列表带有自己的样式，可以使用CSS来修改（例如前面的小圆点都可以去掉，但暂时我还不行 -->


<!-- 这个虽然无序，但是也有自己的标号 -->
<h3>无序列表</h3>
<ul>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ul>

<!-- 其实这个是有数字，来展示顺序 -->
<h4>有序列表</h4>
<ol>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ol>

<!-- 也就是没有符号， -->
<h3>自定义列表</h3>
<dl>
    <dt>我的老婆们</dt>
    <dd>咬人猫</dd>
    <dd>兔总裁</dd>
    <dd>阿叶君</dd>
</dl>

<!-- 表单标签 -->
<!-- 表单是让用户输入信息的重要途经 -->


<!-- 分为两个部分： -->
<!-- 表单域：包含表单元素的区域，重点是form标签 -->
<!-- 表单控件：输入框，提交按钮，重点是input标签 -->


<!-- input标签： -->
<!-- 各种输入控件，单行文本框，按钮，单选框，复选框 -->
<!-- type必须要有，取值种类很多多 -->
<!-- name:给input起了个名字，尤其是对于单选按钮，具有相同的name，才能够多选1 -->
<!-- value：input中的默认值 -->
<!-- checked：默认被选中（用于单选按钮和多选按钮） -->
<!-- maxlength：设定最大长度 -->

<h3>乱七八糟的按钮</h3>
<input type="text"><br/>
<input type="password">
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女<br/>
<input type="checkbox"> 吃饭<input type="checkbox"> 睡觉 <input type="checkbox"> 打游戏

<input type="button" value="我是个按钮">

<form action="html02.html">
    <input type="text"name="username">
    <input type="submit" value="提交">
    <!-- 提交按钮必须要放到format标签内，点击后就会开始尝试给服务器发送 -->
</form>

<form action="html02.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
    <!-- 清空按钮必须要放在form中，点击后会将form内所有的用户输入内容置空 -->
</form>

<input type="file">



<h3>按钮和一些id的绑定</h3>

<label for="male">男</label> <input id="male" type="radio" name="sex">
<select>
    <option value="selected">--请选择地点</option>
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="">陕西</option>
</select>

<select name="" id="">
<option value="">--请选择年份--</option>
<option value="">2004</option>
<option value="">2005</option>
<option value="">2006</option>
<option value="">2007</option>
<option value="">2008</option>
</select>


<!-- 这里的row和col也不会用很多，都是使用css来de -->
<!-- 这里的注释都不起作用了 -->
<textarea name="" id="" cols="50" rows="3">
    


</textarea>

<!-- 无语义标签：div&span -->
<!-- div标签，是division的缩写，含义是分割 -->
<!-- span标签，含义是跨度 -->


<!-- 其实就是两个盒子，用于网页布局 -->
<!-- div是独占一行的，是一个大盒子 -->
<!-- span不独占一行，是一个小盒子 -->

<div>
    <span>咬人兔</span>
    <span>咬人兔</span>
    <span>咬人兔</span>

</div>
<div>
    <span>兔总裁</span>
    <span>兔总裁</span>
    <span>兔总裁</span>
</div>
<div>
    <span>阿叶君</span>
    <span>阿叶君</span>
    <span>阿叶君</span>

</div>




<!-- 表格标签的属性： -->
    </body>
</html>



<!-- html标签是整个html文件的根标签（最顶层标签） -->
<!-- head标签中写页面的属性 -->
<!-- body标签中写的页面上显示的内容 -->
<!-- title标签写的是页面的标题 -->

<!-- 标签的层次结构 -->
<!-- 父子关系 -->
<!-- 兄弟关系 -->

<!-- head和body是html的子标签（html就是head和body的父标签 -->
<!--  title是head的子标签，head是title的夫标签 -->
<!-- head和body是兄弟关系 -->

<!-- 可以使用chrome的开发者模式，用开发者工具查看也买你的结构 -->
<!-- F12，或者右键，审查元素，开启开发者工具，切换到elements标签，就可以看到页面结构细节 -->
<!-- 标签之间的结构关系，构成了一个DOM树 -->
<!-- Document Object Mode  ，文档对象模型的缩写 -->
<!--  -->
